<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>APP开发者后台首页</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<!--    引入头部-->
    <div th:replace="~{/dev/app/common :: header}"></div>
<!--    引入左侧导航-->
    <div th:replace="~{/dev/app/common :: left}"></div>
<!--    主体区域-->
    <div class="layui-body">



        <div style="width:100%;height:100%;" id="zhuZhuangTu"></div>
















    </div>
<!--    引入底部-->
    <div th:replace="~{/dev/app/common :: footer}"></div>
</div>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/layui/echarts.js}" charset="utf-8"></script>
<script>
    //JavaScript代码区域
    layui.use(['element'], function(){
        var element = layui.element;
        var $ = layui.$;                //初始化layui提供的jquery组件
        // 发送ajax请求.
        $.ajax({
            url: "/dev/app/app-download-top-five",
            data: null,
            type: "get",
            dataType: "json",
            success: function(result){
                if(result.code == 0){
                    var softwareNameArray = [];
                    var downloadsArray = [];
                    for(var i = 0;i <result.data.length;i++){
                        softwareNameArray.push(result.data[i].softwareName);
                        downloadsArray.push(result.data[i].downloads);
                    }

                    // 柱状图.
                    option = {
                        color: ['#3398DB'],
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : softwareNameArray,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'直接访问',
                                type:'bar',
                                barWidth: '60%',
                                data:downloadsArray
                            }
                        ]
                    };

                    var divEcharts = echarts.init(document.getElementById("zhuZhuangTu"));
                    divEcharts.setOption(option);


                }
            },
            error: function(){
                alert("服务器给碧螺送礼物了.");
            }
        });






    });
</script>
</body>
</html>